
<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 17:03:11
-->
<template>
  <div ref="bottom3_container" style="height:95%"> </div>
</template>

<script>
import { Column } from '@antv/g2plot';
export default {
  mounted() {
    this.initChart()
  },
  methods:{
    initChart(){
      const data = [
        {name:'增加',time:'2019-03',value:3},
        {name:'增加',time:'2019-04',value:4},
        {name:'增加',time:'2019-05',value:2},
        {name:'增加',time:'2019-06',value:8},
        {name:'增加',time:'2019-07',value:5},
        {name:'删除',time:'2019-03',value:2},
        {name:'删除',time:'2019-04',value:3},
        {name:'删除',time:'2019-05',value:3},
        {name:'删除',time:'2019-06',value:2},
        {name:'删除',time:'2019-07',value:3},
      ]
    const stackedColumnPlot = new Column(this.$refs.bottom3_container, {
      data,
      isStack: true,
      xField: 'time',
      yField: 'value',
      seriesField: 'name',
      label: {
        // 可手动配置 label 数据标签位置
        position: 'middle', // 'top', 'bottom', 'middle'
        // 可配置附加的布局方法
        layout: [
          // 柱形图数据标签位置自动调整
          { type: 'interval-adjust-position' },
          // 数据标签防遮挡
          { type: 'interval-hide-overlap' },
          // 数据标签文颜色自动调整
          { type: 'adjust-color' },
        ],
      },
    });

    stackedColumnPlot.render();
    } 
  }
}
</script>
